<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <script src="https://cdn.jsdelivr.net/npm/eruda"></script>
    <script>eruda.init();</script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
    </style>
</head>

<body style="background:#fff;">
    <canvas id="canvas" style="width:100%; height:100%; position:fixed;"></canvas>

    <script src="../dist/easy-canvas.min.js"></script>
    <script src="./draw.js"></script>
    <script>
        window.onload = function () {
            main()

        }
        window.onresize = function () {
            main()
        }

        function main() {
            const canvas = document.querySelector('#canvas')

            const ctx = canvas.getContext('2d')
            const dpr = window.devicePixelRatio
            const w = window.innerWidth
            const h = window.innerHeight
            canvas.width = w * dpr
            canvas.height = h * dpr
            ctx.scale(dpr, dpr)
            layer = easyCanvas.createLayer(ctx, { dpr, width: w, height: h, })

            let addIndex = 1
            const node = easyCanvas.createElement((h) => {
                const add = () => {
                    node.appendChild(h('button', {
                        on: {
                            click(e) {
                                e.currentTarget.remove()
                            }
                        }
                    }, 'Click me! '+addIndex))
                    addIndex+=1
                }
                const deleteItem = () => node.removeChild(node.children[node.children.length - 1])
                let dialog = null
                const toggleDialog = () => {
                    if (dialog) {
                        node.removeChild(dialog)
                        dialog = null
                    } else {
                        dialog = node.appendChild(Dialog(h, {
                            on: {
                                click() {
                                    toggleDialog()
                                }
                            },
                            title: '提示',
                            content: 'easy-canvas实现了在canvas中创建文档流，并且可以很轻松的支持组件化开发，并且没有第三方依赖，只要支持标准的canvas就可以使用，在实现基本功能的基础上添加了事件、scroll-view等支持。基础版支持小程序、web。'
                        }))
                    }
                }
                return h('view', { styles: { backgroundColor: '#fff' } }, [
                    h('button', {
                        attrs: { id: 'add' },
                        on: {
                            click(e) {
                                add()
                            }
                        }
                    }, 'Add'),
                    h('button', {
                        attrs: { id: 'add' },
                        on: {
                            click(e) {
                                toggleDialog()
                            }
                        }
                    }, 'Toggle Dialog'),
                    h('button', {
                        on: {
                            click() {
                                deleteItem()
                            }
                        }
                    }, 'Delete'),
                    // Dialog(h, {
                    //     title: '提示',
                    //     content: 'easy-canvas实现了在canvas中创建文档流，并且可以很轻松的支持组件化开发，并且没有第三方依赖，只要支持标准的canvas就可以使用，在实现基本功能的基础上添加了事件、scroll-view等支持。基础版支持小程序、web。'
                    // })

                ])
            })
            node.mount(layer)
            console.log(node)
        }

        // 注册全局组件
        easyCanvas.component('button', (opt, children, h) => this.drawButton(h, children, opt))
        canvas.ontouchstart = ontouchstart
        canvas.ontouchmove = ontouchmove
        canvas.ontouchend = ontouchend
        canvas.onmousedown = ontouchstart
        canvas.onmousemove = ontouchmove
        canvas.onmouseup = ontouchend

    </script>
</body>

</html>